{{ define "js" }}
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_loader.js"></script>
  <script>
    $(document).ready(function () {
      var tblOpts = {
        searchDelay: 0,
        processing: true,
        serverSide: true,
        ordering: true,
        searching: false,
        stateSave: true,
        stateSaveCallback: function (settings, data) {
          data.start = 0
          localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
        },
        stateLoadCallback: function (settings) {
          return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
        },
        ajax: dataTableLoader("/validators/leaderboard/data"),
        pagingType: "input",
        language: {
          searchPlaceholder: "Search by Public Key / Index / Name",
          search: "",
          paginate: {
            previous: '<i class="fas fa-chevron-left"></i>',
            next: '<i class="fas fa-chevron-right"></i>',
          },
        },
        drawCallback: function (settings) {
          $('[data-toggle="tooltip"]').tooltip()
        },
        columnDefs: [
          {
            targets: 0,
            data: "0",
            orderable: false,
          },
          {
            targets: 1,
            data: "1",
            orderable: false,
          },
          {
            targets: 2,
            data: "2",
            orderable: false,
          },
          {
            targets: 3,
            data: "3",
            render: function (data, type, row, meta) {
              return (data / 10e8).toFixed(4) + " ETH"
            },
            orderable: false,
          },
        ],
        order: [[5, "desc"]],
      }
      var usp = new URLSearchParams(window.location.search)
      var q = usp.get("q")
      if (q) {
        tblOpts.search = { search: q }
      }
      $("#leaderboard").DataTable(tblOpts)
      $("#leaderboard_filter > label > input").on("input", function (ev) {
        if (ev && ev.target && ev.target.value) {
          var newUrl = window.location.pathname + "?q=" + encodeURIComponent(ev.target.value)
          window.history.replaceState(null, "Validators Leaderboard", newUrl)
        } else {
          window.history.replaceState(null, "Validators Leaderboard", window.location.pathname)
        }
      })
    })
  </script>
{{ end }}

{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css/datatables.min.css" />
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-medal"></i> Validator Staking Leaderboard</h1>

          <nav aria-label="breadcrumb">
            <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
              <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
              <li class="breadcrumb-item"><a href="/validators" title="Validators">Validators</a></li>
              <li class="breadcrumb-item active" aria-current="page">Leaderboard</li>
            </ol>
          </nav>
        </div>
        The Validator Leaderboard is ordered by the 7 day income by default.
      </div>
      <div class="card">
        <div class="card-body px-0 py-2">
          <div class="table-responsive pt-2">
            <table class="table" id="leaderboard" width="100%">
              <thead>
                <tr>
                  <th>Rank</th>
                  <th>Index</th>
                  <th>Public Key</th>
                  <th>Balance</th>
                  <th>Income 1 day</th>
                  <th>Income 7 days</th>
                  <th>Income 31 days</th>
                  <th>Income 1 year</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
    </div>
  {{ end }}
{{ end }}
